<html>
<head>
<title>chrome.input.ime playground</title>
<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript" src="../jquery/jquery-ui.js"></script>
<script type="text/javascript" src="../input_api/ime_event.js"></script>
<script type="text/javascript" src="../input_api/chrome_input_ime.js"></script>
<script type="text/javascript" src="../input_api/impl_page.js"></script>
<script type="text/javascript" src="testarea.js"></script>
<link href="../jquery/css/jquery-ui.css" rel="stylesheet">
<style type="text/css">
body {
  padding: 2em;
  background: white;
  font-family: sans-serif;
}
input, textarea, button {
  font-size: 1.5em;
  font-family: sans-serif;
  padding: 10px;
}

#imePanel {
  padding: 1em;
  min-width: 100px;
  min-height: 50px;
  background: #eee;
  border: 2px solid #aaa;
  float: left;
  margin: 10px;
  font-family: courier;
  box-shadow: 5px 5px 10px #ccc;
}

#menu {
  background: #ee0;
}

#menu li:hover {
  background: #ccf;
  cursor: pointer;
}

#candidates {
  background: #fff;
  padding: 2px;
  margin: 5px;
}

#composition {
  font-weight: bold;
  text-decoration: underline;
  color: #777;
  padding: 2px;
  margin: 5px;
  background: #ddd;
}

.candidate:hover {
  background: #888;
  color: #fff;
  cursor: pointer;
}

.candidate_label {
  font-size: 80%;
  color: #f00;
}

#TestItems label {
  font-size: 1.3em;
}

</style>
</head>
<body>
<h1>chrome.input.ime Playground</h1>

<h3>Input box</h3>
<input type="text" name="input" id="input" value="Sample Text"
       size="50"></input><br/>
<!--
<h3>Text Area<h3/>
<textarea name="textarea" id="input2">Sample Text</textarea><br/>
-->

<h3>IME Panel</h3>
<div id="imePanel">
  <div id="composition">Composition Area</div>
  <div id="candidates">Candidates Area</div>
  <ul type="square" id="menu"><li>IME Menu</li></ul>
</div><br style="clear:both;"/>

<div id="TestItems">
  <h3>chrome.input.ime.* Implementation Tests</h3>
  <button>setCandidateWindowProperties(true)</button>
  <button>setCandidateWindowProperties(false)</button>
  <br/>
  <button>setComposition("hello;")</button>
  <button>clearComposition()</button>
  <br/>
  <button>commitText("hello, world. ")</button>
  <br/>
  <button>setCandidates("abcdefghi")</button>
  <button>setCandidates("ab")</button>
  <button>setCandidates("")</button>
  <br/>
  <button>setMenuItems(["Item 1", "Item 2", "Blah"])</button>
  <button>setMenuItems(["Activated"])</button>
  <button>setMenuItems([])</button>
  <br/>
  <input type="checkbox" id="chkKeyEvent" checked="checked"/>
  <label for="chkKeyEvent">Pass key events</label>
  <br/>
</div>

</body>
</html>
